<template>
	<view class="distribution-section" :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!--加入分销商-->
		<view class="join" v-if="promoter == 'not_promoter'">
			<view class="content">
				<rich-text :nodes="pluginConfig.promoter_config.content"></rich-text>
			</view>
			<view class="join-btn">
				<button type="default" size="default" hover-class="hover" @click="joinPromoter">
					加入{{pluginConfig.promoter_config.title}}
				</button>
			</view>
		</view>
		
		<!--分销商数据-->
		<view class="promoter-section" v-else>
			<view class="header">
				<view class="login" v-if="!userInfo" @click="login()">
					<view class="avatar">
						<image class="image" src="../../../static/images/user_default.png"></image>
					</view>
					<view class="login-btn">
						立即登录
					</view>
				</view>
				<view class="user-info" v-else>
					<view class="avatar">
						<image class="image" :src="userInfo.memberInfo.avatar"></image>
					</view>
					<view class="right-info">
						<view class="nickname">
							<text>{{userInfo.memberInfo.nickname}}</text> 
							<text>(分销商ID：</text><text>{{userInfo.memberInfo.uid}})</text>
						</view>
						<view class="shop">
							<text>推广店铺：</text><text>{{config.title}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!--推广记录-->
			<view class="popularize-record">
			
				<view class="total">
					<view class="title">累计佣金总额</view>
					<view class="value">￥ {{promoter.total}}</view>
				</view>
				<view class="charges">
					<view class="title">余额</view>
					<view class="value">￥ {{promoter.charges}}</view>
					<view class="withdraw" @click="navigateTo('withdraw')">
						<view class="withdraw-btn">提现</view> 
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
				</view>
				<view class="profit-type">
					<view class="item orders-list" @click="navigateTo('orders')">
						<view class="title">推广订单</view>
						<view class="intval">{{count.orders_total}}</view>
					</view>
					<view class="item son-promoter" @click="navigateTo('subordinate')">
						<view class="title">我的下级</view>
						<view class="intval">{{count.subordinate_total}}</view>
					</view>
					<view class="item capitalflow-list" @click="navigateTo('capitalflow')">
						<view class="title">收支明细</view>
						<view class="intval">{{count.charges_total}}</view>
					</view>
					<view class="item record-list" @click="navigateTo('record')">
						<view class="title">推广记录</view>
						<view class="intval">{{count.record_total}}</view>
					</view>
				</view>
			</view>
			
			<!--分销推广方式-->
			<view class="popularize-type">
			
				<view class="table-view">
					<view class="table-view-cell" @click="navigateTo('../index/index')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe637;</text>
						</view>
						<view class="item">
							<view class="title">全店铺推广</view>
							<view class="desc">直接分享店铺、绑定客户，随时赚取佣金</view>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
					
					<view class="table-view-cell" @click="navigateTo('../knowledge/lists')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe60c;</text>
						</view>
						<view class="item">
							<view class="title">课程推广</view>
							<view class="desc">推广课程、随时赚取佣金</view>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
					
					<view class="table-view-cell" @click="navigateTo('../column/lists')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe602;</text>
						</view>
						<view class="item">
							<span class="title">专栏推广</span>
							<span class="desc">推广专栏、随时赚取佣金</span>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
					
					<!--直播课程 需要安装直播插件-->
					<view class="table-view-cell" v-if="pluginList.includes('muu_classroom_plugin_livecourse')" @click="navigateTo('../live/lists')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe6c2;</text>
						</view>
						<view class="item">
							<view class="title">直播课推广</view>
							<view class="desc">推广直播课、随时赚取佣金</view>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
					
					<!--线下课程 需要安装线下课插件-->
					<view class="table-view-cell" v-if="pluginList.includes('muu_classroom_plugin_offline')" @click="navigateTo('../offline/lists')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe60a;</text>
						</view>
						<view class="item">
							<view class="title">线下课推广</view>
							<view class="desc">推广线下课、随时赚取佣金</view>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
					
					<!--资料下载 需要安装资料下载插件-->
					<view class="table-view-cell" v-if="pluginList.includes('muu_classroom_plugin_material')" @click="navigateTo('../material/lists')">
						<view class="icon-bg">
							<text class="iconfont active">&#xe636;</text>
						</view>
						<view class="item">
							<view class="title">资料下载推广</view>
							<view class="desc">推广资料下载、随时赚取佣金</view>
						</view>
						<view class="action">
							<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!--分享店铺海报-->
		<qrcode-poster ref="poster" 
				shareType="home" 
				:title="config.share.title" 
		        :subTitle="config.share.desc" 
		        :headerImg="config.cover_400" 
				:abImg="config.cover_200" 
		        :price="'0'"></qrcode-poster>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import QrcodePoster from '../../../components/muu-qrcode-poster/muu-qrcode-poster.vue'
	export default {
		components: {
			FullscreenLoading,
			QrcodePoster,
		},
		data() {
			return {
				loading: true, // 数据是否加载完成
				pluginList: [], //安装的插件列表
				pluginConfig: {},
				userInfo: {},
				promoter: {},
				count: [],
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			Promise.all([this.getPlugin(),this.getPluginConfig(),this.getPromoter(),this.getCount()]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * 获取已安装插件列表
			 */
			getPlugin(){
				let that = this
				//获取分类数据
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/plugin'
						//#endif
						//#ifdef H5
						url = 'entry/site/plugin'
						//#endif
					this.util.request({
						
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								let plugin = res.data.data
								plugin.forEach(function(v,l){
									that.pluginList.push(v.name)
								})
								console.log(that.pluginList)
							}
							resolve(res.data)
						}
					})
				})
			},
			/**
			 * 获取分销插件配置
			 */
			getPluginConfig: function(){
				let that = this
				return new Promise((resolve, reject) => {
					//获取分销插件配置
					let data = {}
					
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/distribution'
						data.action = 'config'
						//#endif
						//#ifdef H5
						url = 'entry/site/config'
						data.action = 'config'
						data.m = 'muu_classroom_plugin_distribution'
						//#endif
					this.util.request({
						url : url,
						data: data,
						success: function (res) {
							if (res.data.code == 200) {
								that.pluginConfig = res.data.data
							}
							resolve(res)
						},
						fail: function(res){
							reject(res)
						}
					})
				})
			},
			/**
			 * 获取分销商数据
			 */
			/**
			 * 获取分销商数据
			 */
			getPromoter: function(){
				let that = this
				return new Promise((resolve, reject) => {
					//获取数据
					let data = {}
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/distribution'
						data.action = 'promoter'
						//#endif
						//#ifdef H5
						url = 'entry/site/promoter'
						data.m = 'muu_classroom_plugin_distribution'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.promoter = res.data.data
							}else{
								if(res.data.data == 'not_promoter'){
									that.promoter = res.data.data
								}
							}
							resolve(resolve)
						},
						fail: function(res){
							reject(res)
						}
					})
				})
			},
			/**
			 * 获取分销商基础数据
			 */
			getCount: function(){
				let that = this
				let data = {}
				//获取数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/distribution'
					data.action = 'count'
					//#endif
					//#ifdef H5
					url = 'entry/site/promoter'
					data.action = 'count'
					data.m = 'muu_classroom_plugin_distribution'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.count = res.data.data
							}
							resolve(resolve)
						}
					})
				})
			},
			
			joinPromoter: function(){
				let that = this
				console.log('加入分销商')
				let data = {}
					data.action = 'apply'
				//获取首页数据
				this.util.request({
					url : 'entry/wxapp/distribution',
					data : data,
					method : 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							that.getPromoter()
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000
							});
						}
					}
				})
			},
			
			/**
			 * 刷新用户信息
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				that.userInfo = userInfo
			},
			
			/**
			 * 分享店铺首页海报
			 */
			homeShare: function(){
				let that = this
				//获取二维码base64码
				that.is_show_model = false
				let qrcode_url = this.util.url('entry/wxapp/qrcode',{
					'type': 'home',
					'm': 'muu_classroom'
				})
				that.$refs.poster.showCanvas(qrcode_url)
				
			},
			
			navigateTo: function(page){
				let that = this
				let url = page
				console.log(url)
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo.memberInfo) {
					uni.navigateTo({
						url: url
					});
				}else{
					//触发登录框
					this.$refs.login.login()
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		min-height: 100%;
	}
	.distribution-section {
		.join {
			.content {
				padding: 20px;
				padding-bottom: 180rpx;
			}
			
			.join-btn {
				position: absolute;
				bottom: 20rpx;
				left: 0;
				right: 0;
				margin: 0 20rpx;
				z-index: 999;
				button {
					display: block;
					color: #fff;
				}
			}
		}
		
		.promoter-section {
			.header {
				min-height: 180rpx;
				padding: 40rpx 40rpx 60rpx 40rpx;
				.config {
					color: #fff;
					text-align: right;
				}
				.user-info {
					color: #fff;
					display: flex;
					justify-content: left;
					.avatar {
						position: relative;
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;
						border: 3px solid #fff;
						z-index: 2;
						.image {
							width: 96rpx;
							height: 96rpx;
							display: block;
							z-index: 1;
						}
					}
					.right-info {
						display: block;
						margin-left: 10px;
						flex: 1;
						.nickname {
							line-height: 54rpx;
							font-size: 28rpx;
						}
						.uid {
							line-height: 54rpx;
							font-size: 24rpx;
						}
						.shop {
							line-height: 54rpx;
							font-size: 24rpx;
						}
					}
					
				}
				.login {
					color: #fff;
					display: flex;
					justify-content: left;
					.avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;
						.image {
							width: 96rpx;
							height: 96rpx;
						}
					}
					.login-btn {
						display: block;
						line-height: 96rpx;
						font-size: 28rpx;
					}
				}
			}
			
			/*推广收益记录*/
			.popularize-record {
				position: relative;
				margin: 20rpx 40rpx;
				margin-top: -60rpx;
				padding: 20rpx;
				background-color: #fff;
				border: 2rpx solid #eee;
				box-shadow: 0 2rpx 4rpx rgba(0,0,0,.1);
				border-radius: 10rpx;
				z-index: 2;
				.total {
					border-bottom: 2rpx solid #f2f2f2;
					position: relative;
					.title {
						font-size:28rpx;
						color: #888;
					}
					.value {
						font-size:30rpx;
						font-weight: 500;
						color: #ff6600;
						line-height: 76rpx;
					}
					.leval {
						position: absolute;
						top: 20rpx;
						right: 10rpx;
					}
				}
				.charges {
					border-bottom: 2rpx solid #f2f2f2;
					position: relative;
					.title {
						font-size:28rpx;
						color: #888;
					}
					.value {
						font-size:32rpx;
						font-weight: 600;
						color: #ff6600;
						line-height: 76rpx;
						font-weight: 700;
					}
					.withdraw {
						position: absolute;
						top: 40rpx;
						right: 10rpx;
						font-size: 28rpx;
						display: flex;
						.withdraw-btn {
							flex: 1;
							color: #000;
							font-weight: 700;
						}
						.action {
							width: 44rpx;
						}
					}
				}
				
				.profit-type {
					display: flex;
					.item {
						flex: 1;
						display: block;
						text-align: center;
						padding-top: 16rpx;
						.title {
							display: block;
							text-align: center;
							color: #999;
							font-size: 28rpx;
						}
						.intval {
							color: #f60;
							font-size: 28rpx;
							height: 52rpx;
							line-height: 52rpx;
						}
						&:active {
							background-color: #f6f6f6;
						}
					}
				
				}
			}
			
			/*推广方法列表*/
			.popularize-type {
				margin: 20rpx 40rpx;
				border: 2rpx solid #eee;
				box-shadow: 0 2rpx 4rpx rgba(0,0,0,.1);
				border-radius: 10rpx;
				background-color: #fff;
				.table-view {
					
					.table-view-cell {
						display: flex;
						padding: 22rpx 10rpx 22rpx 30rpx;
						border-bottom: 1px solid #f8f8f8;
						
						.icon-bg {
							width:56rpx;
							height:56rpx;
							padding-top: 16rpx;
							background:#fff;
							color: #666;
							border-radius: 100rpx;
							text-align:center;
							line-height: 56rpx;
							margin-right: 10px;
							.active {
								font-size: 32rpx;
							}
						}
				
						.item {
							flex: 1;
							line-height: 44rpx;
							.title {
								display: block;
								font-size: 28rpx;
								color: #000;
							}
							.desc {
								display: block;
								color: #888;
								font-size: 24rpx;
							}
						}
						.action {
							padding-top: 24rpx;
							width: 44rpx;
						}
					}
				}
			}
		}
	}
	
	.Blue {
		.join {
			.join-btn {
				button {
					background-color: $Blue;
				}
				.hover {
					background-color: $Blue-hover;
				}
			}
		}
		.header {
			background-color: $Blue;
		}
	}
	
	.Green {
		.join {
			.join-btn {
				button {
					background-color: $Green;
				}
				.hover {
					background-color: $Green-hover;
				}
			}
		}
		.header {
			background-color: $Green;
		}
	}
	
	.LightRed {
		.join {
			.join-btn {
				button {
					background-color: $LightRed;
				}
				.hover {
					background-color: $LightRed-hover;
				}
			}
		}
		.header {
			background-color: $LightRed;
		}
	}
	
	.Orange {
		.join {
			.join-btn {
				button {
					background-color: $Orange;
				}
				.hover {
					background-color: $Orange-hover;
				}
			}
		}
		.header {
			background-color: $Orange;
		}
	}
	
	.LightPink {
		.join {
			.join-btn {
				button {
					background-color: $LightPink;
				}
				.hover {
					background-color: $LightPink-hover;
				}
			}
		}
		.header {
			background-color: $LightPink;
		}
	}
	
	.Magenta {
		.join {
			.join-btn {
				button {
					background-color: $Magenta;
				}
				.hover {
					background-color: $Magenta-hover;
				}
			}
		}
		.header {
			background-color: $Magenta;
		}
	}
</style>
